<template>
	<view>
		<view class="head-bar">
			<view class="item" v-for="(item,index) in orderBar" :key="index" :class="{active:item.id==current}" @tap="getOrder(item.id)">
				{{item.name}}
			</view>
			
		</view>
		<view class="card-list">
			
		
		<view v-for="item in lists" :key="item.order.id" class="list" v-if="current != 9 " >
			<view >
				<view class="card">
					<view class="order-title">
						<text>订单编号：{{item.order.orderSn}}</text>
						<text v-if="current==0">未付款</text>
						<text v-if="current==1">等待发货</text>
						<text v-if="current==2">已发货</text>
						<text v-if="current==3||current==4">已收货</text>
					</view>
					<view class="goods" v-for="item1 in item.items">
						<image :src="item1.productPic" mode=""></image>
						<view class="info"  >
							<view class="fir">
								<text>{{item1.productName}}</text>
								<text>￥{{item1.totalPrice}}</text>
							</view>
							<view class="sec">
								<text>编号{{item1.productSkuId}}</text>
								<text>x{{item1.productQuantity}}</text>
							</view>
							<view class="thr" >
								规格：
								<text v-for="item2 in JSON.parse(item1.productAttr)">{{item2.key}}:{{item2.value}}</text>
							</view>
							<view   v-if="current==2&&item1.isReturn==0"  class="four" @tap="returnGoods(item1)">
								退货
							</view>
							<view   v-if="current==2&&item1.isReturn==1"  class="four" style="color: red;">
								退货中
							</view>
						</view>
					
					</view>
					<view class="total">
						<text>时间：{{item.order.modifyTime}}</text>
						<text>合计：￥ {{item.order.totalAmount}} 元</text>
					</view>
					<view class="btns">
						<view class="btn" v-if="current==0" @tap="cancleOrder(item.order.id)">
							取消订单
						</view>
						<view class="btn" v-if="current==0" @tap="pay(item.items)">
							付款
						</view>
						<view class="btn" v-if="current==2" @tap="confirmDone(item.order.id)">
							确认收货
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="list" v-if="current==9">
			<view class="card" v-for="item in applyList" :key="item.id">
				<view class="order-title">
					<text>订单编号：{{item.orderSn}}</text>
					<text>{{item.status|orderProcessText}}</text>
					
				</view>
				<view class="goods" >
					<image :src="item.productPic" mode=""></image>
					<view class="info"  >
						<view class="fir">
							<text>{{item.productName}}</text>
							<text>￥{{item.productRealPrice}}</text>
						</view>
						<view class="sec">
							<text>编号{{item.productSkuId}}</text>
							<text>x{{item.productCount}}</text>
						</view>
						<view class="thr" >
							规格：
							<text v-for="item2 in JSON.parse(item.productAttr)">{{item2.key}}:{{item2.value}}</text>
						</view>
						
					</view>
				
				</view>
				<view class="total">
					<text>时间：{{item.createTime}}</text>
					<text>合计：￥ {{item.returnAmount}} 元</text>
				</view>
				
			</view>
		</view>
		</view>
	
	</view>
</template>

<script>
	import{findAllOrders,cancel,receiveDone,orderReturnApplys} from "../../../utils/goodsInfo/addCar/order/index.js"
	import {order} from "../../../utils/goodsInfo/addCar/order/index.js"
	export default {
		data() {
			return {
				orderBar: [{
						imgs: '../../static/icons/icon-pay.png',
						name: "待付款",
						id:0
					},
					{
						imgs: '../../static/icons/pay-done.png',
						name: "已付款",
						id:1
					},
					{
						imgs: '../../static/icons/icon-car.png',
						name: "已发货",
						id:2
					},
					{
						imgs: '../../static/icons/icon-done.png',
						name: "已收货",
						id:3
					},
					{
						imgs: '../../static/icons/icon-back.png',
						name: "售后",
						id:9
					},
				],
				current:0,
				list:[],
				orderList:[],
				orderId:'',
				applyList:[]
			}
		},
		methods: {
			getOrder(id){
				this.current=id
				uni.showLoading({
					 title: '加载中',
					 success(res){
						 
					 }
				})
				setTimeout(function () {
				    uni.hideLoading();
					
				}, 500);
				
			},
			cancleOrder(id){
				cancel(id).then(res=>{
					console.log(res)
					uni.showLoading({
						 title: '加载中',
						 success(res){
							 
						 }
					})
					setTimeout(function () {
					    uni.hideLoading();
						
					}, 500);
					this.init()
				})
			},
			confirmDone(id){
				
				receiveDone({
					orderId:id
				}).then(res=>{
					console.log(res)
					this.init()
				})
			},
		async init(){
			await findAllOrders().then(res=>{
					console.log(res)
					this.list=res.data.orderList
				})
			await orderReturnApplys().then(res=>{
				console.log(res)
				this.applyList=res.data.items
			})
			},
			pay(item){
				console.log(item[0].orderId)
				this.orderId=item[0].orderId
				this.orderList=[]
				// item.forEach(el=>{
				// 	var obj={}
				// 	obj.productId=el.productId
				// 	obj.productQuantity=el.productQuantity
				// 	obj.productSkuId=el.productSkuId
				// 	obj.cartId=el.cartId
				// 	this.orderList.push(obj)
				// })
				
				// order({
				// 	"addressId": "string",
				// 	"orderId": this.orderId,
				// 	"orderItemList": this.orderList,
				// 	"payType": 0,
				// 	"sourceType": 0
				// 	}).then(res=>{
				// 		// console.log(res)
				// 		// this.orderId=res.data.orderId
				// 		// console.log(this.orderId)
				// 		uni.showToast({
				// 			title:"购买成功 1s后跳到订单确认页",
				// 			icon:"none"
				// 		})
				// 	})	
					// setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/cart/order/order?id='+this.orderId
						})
					// },1000)
				
			},
			returnGoods(item){
				console.log(item)
				var id=item.orderId
				var skuId=item.id
				// console.log(skuId)
				uni.navigateTo({
					url:'/pages/mine/bacKorder/bacKorder?id='+id+'&skuId='+skuId
				})
				
			}
		},
		onLoad(options){
			this.current=options.type
			this.init()
		},
		onShow() {
			
		},
			filters:{
					orderProcessText(process) {
						var text = '等待处理';
						switch (JSON.stringify(process)) {
							case '0':
								text = '等待处理';
								break;
							case '1':
								text = '确认退货,等待发货';
								break;
							case '2':
								text = '已退款';
								break;
							case '3':
								text = '已拒绝';
								break;
							case '9':
								text = '拒绝退货';
								break;
		
							default:
								break;
						}
						return text;
					}
				},
		computed:{
			lists(){
								if(this.current == 3 || this.current == 4){
									return this.list.filter(ele =>ele.order.status == 3 || ele.order.status == 4 )
								}else if(this.current == 9){
									// return this.applyList
								}
								// else if(this.current==2){
								// 	console.log(this.list.filter(ele=>ele.order.status==2))
								// }
								else{
									return this.list.filter(ele =>ele.order.status == this.current)
								}
			}
		}
	}
</script>

<style scoped lang="scss">
.head-bar{
		width: 100%;
	    overflow-y: auto;
	    position: fixed;
	    left: 0;
	    top: 0;
	    top: 80rpx;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	 
	    justify-content: space-around;
	    width: 100%;
	    height: 63rpx;
	    padding-top: 14rpx;
	    background-color: #354e44;
	    color: #fff;
	    font-size: 30rpx;
	    line-height: 32rpx;
	    z-index: 999;
}
.active{
	order-bottom: 2rpx solid #dd524d;
	    color: #dd524d;
}
.card-list{
	margin-top: 130rpx;
	.card{
			width: 672rpx;
		    box-sizing: border-box;
		    padding: 36rpx;
		    border-radius: 24rpx;
		    background-color: #fff;
		    margin: 30rpx auto;
		    font-size: 24rpx;
		    color: #3e3e3e;
	.order-title{
			display: flex;
		   
		    justify-content: space-between;
		    border-bottom: 2rpx solid #f1ece7;
		    padding-bottom: 30rpx;
	}
	.goods{
			display: flex;
			justify-content: flex-start;
		    border-bottom: 2rpx solid #f1ece7;
		    padding: 30rpx 0;
			image{
				width: 162rpx;
				height: 162rpx;
				background-color: #8f8f94;
			}
			.info{
				width: 470rpx;
				 margin-left: 28rpx;
				 .fir{
					 font-size: 26rpx;
					  line-height: 74rpx;
					  color: #3e3e3e;
				 }.fir,.sec{
					 display: flex;
					 justify-content: space-between;
					 align-items: center;
				 }
				 .sec,.thr{
						font-size: 22rpx;
					     color: #8d8d8d;
					     line-height: 30rpx;
					     margin-top: 4rpx;
				 }
				 .four{
						text-align: right;
					     margin-top: 10rpx;
					     color: #8d8d8d;
					     text-decoration: underline;
				 }
			}
	}
	.total{
			font-size: 26rpx;
		    line-height: 36rpx;
		    text-align: right;
		    margin-top: 14rpx;
		    display: -webkit-box;
		    display: -webkit-flex;
		    display: flex;
		    justify-content: space-between;
	}
	.btns{
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
		.btn{
				width: 124rpx;
			    height: 50rpx;
			    border: 2rpx solid #2d4f43;
			    font-size: 26rpx;
			    border-radius: 10rpx;
			    color: #2d4f43;
			    text-align: center;
			    line-height: 50rpx;
			    margin-left: 32rpx;
		}
	}
	}
}
</style>
